<template>
  <div class="dashboard-container">
    <div class="app-container">
      <div class="edit-form">
        <el-button style="margin-left:80px" type="primary" size="mini" @click="$router.push('/usercenter/userinfo')">订单详情</el-button>
        <el-form ref="userForm" label-width="220px">
          <!-- 姓名 部门 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="昵称" prop="username">
                <el-input size="mini" class="inputW" :value="name" />
              </el-form-item>
            </el-col>

          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="性别" prop="formOfEmployment">
                <el-select size="mini" class="inputW" value="男" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="家庭住址" prop="username">
                <el-input size="mini" class="inputW" value="湖南省长沙市岳麓区xx街道xx号" />
              </el-form-item>
            </el-col>

          </el-row>

          <!-- 工号 注册时间 -->

          <!--手机 聘用形式  -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="手机" prop="mobile">
                <el-input
                  size="mini"
                  class="inputW"
                  :value="mobile"
                />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="光伏设备型号" prop="workNumber">
                <el-input size="mini" class="inputW" value="LX-0808-Y" />
              </el-form-item>
            </el-col>
          </el-row>

          <el-row>
            <el-col :span="12">
              <el-form-item label="购买设备时间" prop="timeOfEntry">
                <el-input
                  size="mini"
                  value="2022-08-12"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户描述">
                <el-input
                  size="mini"
                  type="textarea"
                  class="inputW"
                  value="设备状况良好"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 照片 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="用户头像">
                <!-- 放置上传图片 -->
                <image-upload />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 保存个人信息 -->
          <el-row type="flex">
            <el-col :span="12" style="margin-left:220px">
              <el-button size="mini" type="primary" @click="open2">保存更新</el-button>
            </el-col>
          </el-row>
        </el-form>
      </div>

    </div>
  </div>
</template>

<script>
import imageUpload from './image-upload.vue'
import { mapGetters } from 'vuex'

export default {
  components: { imageUpload },

  computed: {
    ...mapGetters(['name', 'mobile']) // 映射给了计算属性
  },
  methods: {
    open2() {
      this.$message({
        message: '用户信息更新成功',
        type: 'success'
      })
    }
  }

}
</script>

<style scoped lang="scss">
    .edit-form {
      background: #fff;
      padding: 20px;
      .inputW {
        width: 380px
      }
    }

</style>

